<template>
    <div class="order">
        <!-- 标签页开始 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" color="#4bc0b8">
            <el-tab-pane label="所有订单" name="first">
                <el-table :data="orders" stripe style="width: 100%">
                    <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
                    <el-table-column prop="orderTime" label="下单时间" width="180">
                        <template slot-scope="scope">
                        {{moment(scope.row.logTime).format('YYYY-MM-DD h:mm:ss')}}
                        </template>
                    </el-table-column>
                    <el-table-column  prop="total"  label="总价"></el-table-column>
                    <el-table-column  prop="status"  label="状态"></el-table-column>
                    <el-table-column  prop="customerId"  label="顾客ID"></el-table-column>
                    <el-table-column  prop="employeeId"  label="员工ID"></el-table-column>
                    <el-table-column label="操作"  align="center">
                        <template slot-scope="scope">
                            <el-button @click="editHandler(scope.row)" size="mini" type="text">详情</el-button>
                            <el-button @click="deleteHandler(scope.row.id)" size="mini" type="text">派单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                 <!-- 分页开始 -->
       <div class="paginnation">
            <el-pagination
            layout="prev, pager, next"
            :page-size = 'list.pageSize'
            :total="total"
            @current-change='changeHandler'>
        </el-pagination>
    </div>
      <!-- 分页结束 -->
            </el-tab-pane>
            <el-tab-pane label="待支付" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="待派单" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="待接单" name="fourth">定时任务补偿</el-tab-pane>
            <el-tab-pane label="待服务" name="fifth">定时任务补偿</el-tab-pane>
            <el-tab-pane label="待确认" name="sixth">定时任务补偿</el-tab-pane>
            <el-tab-pane label="已完成" name="seventh">定时任务补偿</el-tab-pane>
        </el-tabs>
        <!-- 标签页结束 -->
    </div>
</template>
<script>
import moment from 'moment'
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
          activeName: 'first',
          list:{
              page:1,
              pageSize:10
          }
        }
    },
computed:{
    ...mapState('order',['orders','total'])
},
methods:{
    ...mapActions('order',['findAllOrder']),
     handleClick(tab, event) {
        console.log(tab, event);
      },
       changeHandler(page){
            this.list.page = page,
           this.findAllOrder(this.list)
        },
        moment
},
created(){
    this.findAllOrder(this.list)
}
}
</script>
<style scoped>
.paginnation{
    float: right;
}
</style>